<template>
  <div class="app-container">
    <div style="display:flex;margin-bottom:20px;">
      <div>
        <el-input v-model="param.search" size="small" :clearable="true" placeholder="请输入参赛名称或编号" />
      </div>
      <div style="margin-left:20px">
        <el-button type="primary" size="small" icon="el-icon-search" @click="searchList">搜索</el-button>
      </div>
    </div>
    <el-button type="primary" @click="showAdd()">添加</el-button>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="80" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="参赛编号" width="120" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.registerNum }}
        </template>
      </el-table-column>
      <el-table-column label="赛事ID" width="80" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.gameId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="赛事名称" width="150" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.gameName }}
        </template>
      </el-table-column>
      <el-table-column label="报名用户id" width="100" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.userId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="报名用户名称" width="110" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.userName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="参赛团队id" width="100" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.teamId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="参赛团队名称" width="110" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.teamName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="参赛区域" width="110" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.gameArea }}
        </template>
      </el-table-column>
      <el-table-column label="参赛主题名称" width="110" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.gameTheme }}
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        label="参赛审核状态"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status == 1 ? '审核成功' : '审核失败' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="created_at"
        label="参赛时间"
        width="200"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="role == 'YHLX003'" align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" :disabled="scope.row.status==1" icon="el-icon-edit" size="mini" @click="CheckStu(scope.row.status == 1?2:1,scope.row.id)">审核</el-button>
        </template>
      </el-table-column>
      <el-table-column v-else-if="role == 'YHLX002'" align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-edit" size="mini" @click="grade(scope.row.id)">打分</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="param.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="param.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="margin-top:20px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog title="评委打分" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="分数" :label-width="formLabelWidth">
          <el-input v-model="form.userScore" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="subGrade('form')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加报名信息" :visible.sync="dialogFormVisible">
  <el-form :model="addform"  ref="addform" :rules="rules">
    <el-form-item label="参赛编号" :label-width="formLabelWidth" prop="registerNum">
      <el-input v-model="addform.registerNum" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="参赛区域" :label-width="formLabelWidth" prop="gameArea">
      <el-input v-model="addform.gameArea" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="参赛主题" :label-width="formLabelWidth" prop="gameTheme">
      <el-input v-model="addform.gameTheme" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="团队名称" :label-width="formLabelWidth" prop="teamId">
      <el-select v-model="addform.teamId" placeholder="请选择团队">
        <el-option 
      v-for="item in team"
      :key="item.id"
      :label="item.name"
      :value="Number(item.id)"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="赛事名称" :label-width="formLabelWidth" prop="gameId">
      <el-select v-model="addform.gameId" placeholder="请选择赛事">
        <el-option 
      v-for="item in game"
      :key="item.id"
      :label="item.name"
      :value="Number(item.id)"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirmAdd('addform')">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>

<script>
import { getList } from '@/api/enroll'
import { SetStu } from '@/api/enroll'
import { setGrade } from '@/api/enroll'
import { addsign } from '@/api/enroll'
import { getTeam } from '@/api/enroll'
import { getGame } from '@/api/enroll'


export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      role: '',
      reaviewId: '',
      team:[],
      game:[],
      param: {
        search: '',
        page: 1,
        limit: 10
      },
      formLabelWidth: '120px',
      total: 1,
      form: {
        userScore: '',
        registerId: ''
      },
      addform:{
        registerNum : '',
        gameName:'',
        teamName: '',
        gameArea: '',
        gameTheme: '',
        teamId : '',
        gameId :'',
        userId : 0,
        userName :''
      },
       rules:{
          registerNum: [
            { required: true, message: '请输入参赛编号', trigger: 'blur' }
          ],
          gameArea:[
            { required: true, message: '请输入比赛地区', trigger: 'blur' }
          ],
          gameTheme:[
            {required: true, message: '请输入比赛主题', trigger: 'blur'}
          ],
          teamId: [
            { required: true, message: '请选择团队', trigger: 'change' }
          ],
          gameId: [
            { required: true, message: '请选择比赛', trigger: 'change' }
          ],
       },

      dialogFormVisible: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    showAdd(){
      this.dialogFormVisible = true
    },
    grade(id) {
      this.dialogFormVisible = true
      this.form.registerId = id
    },
    subGrade(formName) {
      setGrade(this.form.registerId, this.form.userScore, this.reviewer_id).then((res) => {
        console.log(res, 111)
        if (res.code == '20000') {
          this.$message({
            message: res.msg,
            type: 'success'
          })
          this.fetchData()
          this.dialogFormVisible = false
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
        this.dialogFormVisible = false
      })
    },
    handleSizeChange(val) {
      this.param.limit = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.param.page = val
      this.fetchData()
    },
    searchList() {
      this.fetchData()
    },
    CheckStu(status, id) {
      SetStu(status, id).then((res) => {
        console.log(res, 111)
        if (res.code == 20000) {
          this.$message({
            message: res.msg,
            type: 'success'
          })
          this.fetchData()
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          })
          this.fetchData()
        }
      })
    },
    fetchData() {
      this.listLoading = true
      getList(this.param).then((response) => {
        this.list = response.data.data
        this.listLoading = false
        this.total = response.data.total
        this.role = localStorage.getItem('role')
        this.reviewer_id = localStorage.getItem('id')
        // console.log(localStorage)
      }).catch(() => {
        this.listLoading = false
      })
      getTeam().then((res)=>{
        this.team = res.data
      })
       getGame().then((res)=>{
        this.game = res.data
      })
    },
     confirmAdd(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
           addsign(this.addform).then((res) => {
             console.log(res,111);
             if(res.code == 20000){
               this.$message({
                 message: '添加成功',
                 type: "success",
               });
             } else{
               this.$message({
                 message: '添加失败',
                 type: "error",
               });
             }
           });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
  }
}
</script>
